<template>
  <view class="remote-door-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-title">远程开门</view>
      <view class="header-desc">选择要开启的门禁设备</view>
    </view>

    <!-- 门禁设备列表 -->
    <view class="door-list">
      <view v-if="loading" class="loading-container">
        <text class="loading-text">正在加载门禁设备...</text>
      </view>
      <view 
        v-for="door in doorList" 
        :key="door.id"
        class="door-item"
        @click="openDoor(door)"
      >
        <view class="door-info">
          <view class="door-name">{{ door.deviceName }}</view>
          <view class="door-location">设备编号: {{ door.deviceSn }}</view>
        </view>
        <view class="door-status" :class="door.status === 0 ? 'online' : door.status === 1 ? 'offline' : 'fault'">
          {{ door.status === 0 ? '在线' : door.status === 1 ? '离线' : '故障' }}
        </view>
        <view class="door-icon">
          <text class="door-symbol">🚪</text>
        </view>
      </view>
    </view>

    <!-- 操作提示 -->
    <view class="tips">
      <view class="tip-item">
        <text class="tip-icon">💡</text>
        <text class="tip-text">点击门禁设备即可远程开启</text>
      </view>
      <view class="tip-item">
        <text class="tip-icon">⚠️</text>
        <text class="tip-text">请确保门禁设备在线且正常工作</text>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/util/request.js'

export default {
  name: "RemoteDoorPage",
  data() {
    return {
      loading: false,
      doorList: []
    }
  },
  onLoad() {
    this.getDoorList();
  },
  methods: {
    // 获取门禁设备列表
    async getDoorList() {
      this.loading = true;
      try {
        const res = await request({
          url: 'opencv-server/opencv/accessDevice/all',
          method: 'GET'
        });
        
        if (res.code === 200 && res.data) {
          this.doorList = res.data;
        } else {
          // 接口失败时使用默认数据
          console.log('获取门禁列表失败，使用默认数据');
          this.doorList = [
            {
              id: 1,
              deviceName: "1号楼门禁",
              deviceSn: "DKJ-20230601",
              buildingId: 1,
              status: 0
            },
            {
              id: 2,
              deviceName: "2号楼门禁",
              deviceSn: "DKJ-20230602",
              buildingId: 2,
              status: 0
            },
            {
              id: 3,
              deviceName: "地下车库门禁",
              deviceSn: "DKJ-20230603",
              buildingId: 3,
              status: 1
            }
          ];
          uni.showToast({
            title: '获取门禁列表失败',
            icon: 'none'
          });
        }
      } catch (e) {
        console.error('获取门禁列表出错', e);
        // 网络错误时使用默认数据
        this.doorList = [
          {
            id: 1,
            deviceName: "1号楼门禁",
            deviceSn: "DKJ-20230601",
            buildingId: 1,
            status: 0
          },
          {
            id: 2,
            deviceName: "2号楼门禁",
            deviceSn: "DKJ-20230602",
            buildingId: 2,
            status: 0
          },
          {
            id: 3,
            deviceName: "地下车库门禁",
            deviceSn: "DKJ-20230603",
            buildingId: 3,
            status: 1
          }
        ];
        uni.showToast({
          title: '网络错误，使用默认数据',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 远程开门
    async openDoor(door) {
      // 检查设备是否在线 (status: 0表示在线，1表示离线，2表示故障)
      if (door.status !== 0) {
        const statusText = door.status === 1 ? '离线' : '故障';
        uni.showToast({
          title: `设备${statusText}，无法开门`,
          icon: 'none'
        });
        return;
      }
      
      // 显示确认弹窗
      uni.showModal({
        title: '确认开门',
        content: `确定要开启"${door.deviceName}"吗？`,
        success: async (res) => {
          if (res.confirm) {
            await this.sendOpenDoorRequest(door);
          }
        }
      });
    },
    
    // 发送开门请求到后端
    async sendOpenDoorRequest(door) {
      try {
        uni.showLoading({
          title: '正在开门...'
        });
        
        const res = await request({
          url: 'opencv-server/opencv/property/open',
          method: 'POST',
          data: door.id
        });
        
        uni.hideLoading();
        
        if (res.code === 200) {
          uni.showToast({
            title: '开门成功',
            icon: 'success'
          });
          
          // 可以在这里添加开门成功的其他逻辑
          // 比如记录开门日志、更新设备状态等
          
        } else {
          uni.showToast({
            title: res.message || '开门失败',
            icon: 'none'
          });
        }
        
      } catch (e) {
        uni.hideLoading();
        console.error('开门请求出错', e);
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style scoped>
.remote-door-container {
  background: #f7f8fa;
  min-height: 100vh;
  padding: 30rpx;
}

.page-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.header-desc {
  font-size: 26rpx;
  color: #666;
}

.door-list {
  margin-bottom: 40rpx;
}

.loading-container {
  text-align: center;
  padding: 40rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

.door-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.door-item:active {
  transform: scale(0.98);
  box-shadow: 0 1rpx 4rpx rgba(0,0,0,0.1);
}

.door-info {
  flex: 1;
}

.door-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.door-location {
  font-size: 24rpx;
  color: #666;
}

.door-status {
  margin: 0 20rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
}

.door-status.online {
  background: #e6f7e6;
  color: #52c41a;
}

.door-status.offline {
  background: #fff2e8;
  color: #fa8c16;
}

.door-status.fault {
  background: #fff1f0;
  color: #f5222d;
}

.door-icon {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.door-symbol {
  font-size: 40rpx;
}

.tips {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.tip-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.tip-item:last-child {
  margin-bottom: 0;
}

.tip-icon {
  font-size: 24rpx;
  margin-right: 16rpx;
}

.tip-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}
</style> 